<template>
	<view class="general-setup">
		<div :style="{
				height:`${statusBarHeight}px`,
				background:'#2f9aff'
			}"></div>
		<view :style="{height: `${topHeight}px`,paddingLeft:`${pagePadding}px`,paddingRight:`${pagePadding}px`}">
			<view class="personal-title">
				<i class="clearIcon" @click="goBack"></i>
				<text>通用设置</text>
			</view>
		</view>
		<view class="settings-list">
			<view class="settings-item" @click="handleMessageDelivery">
				<text>消息推送</text>
				<text class=" icon-right"></text>
			</view>

			<view class="settings-item" @click="handleClearCache">
				<text>清除缓存</text>
				<text class=" icon-right"></text>
			</view>

			<view class="settings-item" @click="handleAboutUs">
				<text>关于我们</text>
				<text class=" icon-right"></text>
			</view>

			<view class="settings-item" @click="rotate=!rotate">
				<text>退出登录</text>
				<text class=" icon-right" :class="rotate?'rotate45':''"></text>
			</view>

			<!-- 退出登录部分 -->
			<view class="logout-section" v-if="rotate">
				<view class="logout-item disCenter" @click="handleLogout(1)">
					<text>切换账号</text>
				</view>
				<view class="logout-item disCenter" @click="handleLogout(2)">
					<text>解绑当前绑定手机账号</text>
				</view>
				<view class="logout-item disCenter" @click="handleLogout(3)">
					<text>退出登录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const statusBarHeight = ref(0); // 状态栏高度
	const topHeight = ref(0); // 胶囊高度
	const pagePadding = ref(0);
	const contHeight = ref(0); //内容高度
	const sexIndex = ref(0);
	const rotate = ref(false);
	// 处理页面跳转
	const goBack = (type) => {
		uni.navigateBack()
	};

	// 处理页面跳转
	const handleNavigateTo = (type) => {

	}

	onMounted(() => {
		const systemInfo = uni.getSystemInfoSync();
		statusBarHeight.value = systemInfo.statusBarHeight; // 获取状态栏高度

		const res = uni.getMenuButtonBoundingClientRect();
		pagePadding.value = systemInfo.screenWidth - res.right
		topHeight.value = res.height + (res.top - statusBarHeight.value) * 2
		contHeight.value = topHeight.value + statusBarHeight.value
	});

	// 处理消息推送设置
	const handleMessageDelivery = () => {
		uni.navigateTo({
			url:'/pages/my/messageSet/messageset'
		})
	};

	// 处理清除缓存
	const handleClearCache = () => {
		uni.showModal({
			title: '提示',
			content: '确定要清除缓存吗？',
			success: (res) => {
				if (res.confirm) {
					uni.showToast({
						title: '清除成功',
						icon: 'success'
					})
				}
			}
		})
	};

	// 处理关于我们
	const handleAboutUs = () => {
		uni.navigateTo({
			url:"/pages/my/aboutUs/aboutUs"
		})
	};

	// 处理退出登录
	const handleLogout = (n) => {
		if (n == 1) {
			uni.showModal({
				title: '提示',
				content: '是否切换账号？',
				success: (res) => {
					if (res.confirm) {
						// 实现退出登录逻辑
						uni.reLaunch({
							url: '/pages/login/index'
						})
					}
				}
			})
		} else if (n == 2) {
			uni.showModal({
				title: '提示',
				content: '确定要解绑当前绑定手机账号吗？',
				success: (res) => {
					if (res.confirm) {
						// 实现退出登录逻辑
						uni.reLaunch({
							url: '/pages/login/index'
						})
					}
				}
			})
		} else if (n == 3) {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						// 实现退出登录逻辑
						uni.reLaunch({
							url: '/pages/login/index'
						})
					}
				}
			})
		}

	};
</script>

<style lang="scss" scoped>
	.general-setup {
		background: #F2F6F5;
		height: 100vh;
	}

	.personal-title {
		height: 100%;
		font-size: 38rpx;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		.clearIcon {
			position: absolute;
			height: 100%;
			width: 60rpx;
			background: url(/static/images/my/ic_fanhui@2x.png)no-repeat center;
			background-size: 35%;
			left: 0;
			top: 0;
		}
	}

	.settings-list {
		margin-top: 10px;

		.settings-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 15px;
			height: 50px;
			background-color: #fff;
			border-bottom: 1px solid #eee;

			text {
				font-size: 16px;
				color: #333;
			}

			.icon-right {
				display: block;
				color: #999;
				width: 30rpx;
				height: 30rpx;
				margin-left: 20rpx;
				background: url("/static/images/my/my_jiantou.png")no-repeat center;
				background-size: contain;
				transition: 0.5s;
			}

			.rotate45 {
				transform: rotate(45deg);
			}

			.rotate45 {
				transform: rotate(90deg);
			}
		}

		.logout-section {
			background-color: #fff;

			.logout-item {
				height: 50px;
				padding: 0 15px;
			}
		}
	}

	.disCenter {
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>